<template>
    <div class="person-center-content">
        <div class="person-center-item person-account person-Info" style=" margin-bottom: 10px;">
            <div class="person-center-hd">
                <span class="person-center-title">个人中心</span>
            </div>
            <div class="person-center-bd">
                <div class="person-Info-con">
                    <div class="person-Info-hd">{{userInfo.UserName}}
                        <span class="person-phone">{{username}}</span>
                    </div>
                    <div class="person-Info-bd">ID :
                        <span class="person-Id">{{userInfo.IDCard}}</span>
                    </div>
                </div>
                <div class="person-account-num clear">
                    <div class="account-item">
                        <div class="account-hd">账户余额</div>
                        <div class="account-bd">{{userInfo.UserAccount | calMoney}}</div>
                    </div>
                    <div class="account-item">
                        <div class="account-hd">C资产</div>
                        <div class="account-bd">{{userInfo.C_Balance | calCode}}</div>
                    </div>
                    <div class="account-item" style="border-right:0;">
                        <div class="account-hd">
                            <span class="init-code a2">普惠积分</span>
                        </div>
                        <div class="account-bd">
                            <p class="tac">
                                <span>{{userInfo.CashBalance | calCode}}
                                    <em class="f14">(持有)</em>
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="ph-code clear">
            <div class="ph-code-main">
                <div class="ph-code-item">普惠积分当前价
                    <span class="blue">{{pHIcode.last | calMoney}}</span>
                </div>
                <div class="ph-code-item">交易量
                    <span class="blue">{{pHIcode.vol}}</span>
                </div>
                <div class="ph-code-item">涨幅
                    <span :class="{red:changedayflag,green:!changedayflag}">{{pHIcode.changeday}}</span>
                </div>
            </div>
        </div>
        <div class="person-center-item person-account person-Info">
            <div class="person-account-ft  clear">
                <a href="我要充值.html" class="input-btn account-btn">我要充值</a>
                <a href="兑换普惠积分.html" class="input-btn account-btn2">兑换普惠积分</a>
            </div>
        </div>
        <div class="person-center-item">
            <div class="tab">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="（近期）普惠积分兑换记录" name="first">
                        <div class="table">
                            <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
                                <el-table-column prop="id" label="兑换编号" width="200px">
                                </el-table-column>
                                <el-table-column prop="money" label="支付现金">
                                </el-table-column>
                                <el-table-column prop="num" label="第三方积分数量">
                                </el-table-column>
                                <el-table-column prop="code" label="普惠积分">
                                </el-table-column>
                                <el-table-column prop="date" label="兑换时间" width="220px">
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="page-main clear">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper">
                            </el-pagination>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import $ from 'jquery'
import accounting from 'accounting'
export default {
    filters: {
        calMoney(value) {
            return '¥' + accounting.toFixed(value, 2);
        },
        calCode(value) {
            return accounting.toFixed(value, 4)
        }
    },
    computed: {
    },
    data() {
        return {
            activeName: 'first',
            username: '',
            tableData: [],


            // 用户信息
            userInfo: {
                UserName: '',
                IDCard: '',
                UserAccount: '',
                C_Balance: '',
                CashBalance: '',
                UserId: ''
            },

            // 普惠积分
            pHIcode: {
                // 当前交易价
                last: '',
                // 交易量
                vol: '',
                // 涨幅
                changeday: ''
            },
            // 涨幅判断
            changedayflag: false,


            pageSize:0
        }
    },

    components: {

    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        calchangeday() {
            let first = this.pHIcode.changeday.substr(0, 1);
            if (first === "+") {
                this.changedayflag = true;
            } else {
                this.changedayflag = false;
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            var that = this;
            let params = {
                PageSize: 4,
                PageIndex: val,
                UserId: this.userInfo.UserId
            }
            $.get('http://192.168.0.155:155/api/Main/GetRecentExchangePH_Record', params, (res) => {
                let arr = {};
                for (let i = 0; i < res.length; i++) {
                    console.log(res[i]);
                    arr.id = res[i].Id;
                    arr.money = res[i].Use_CashBalance;
                    arr.num = res[i].Use_ThirdParty_Integral;
                    arr.code = res[i].ExchangePHIntegral_Qty;
                    arr.date = res[i].CreateDate;
                    _this.tableData.push(arr);
                    arr = {}
                }
            })
        },
        
    },
    mounted() {
        this.$nextTick(function () {
            // 获取用户信息
            let username = sessionStorage.getItem('userName');
            this.username = username;

            let _this = this;
            $.get('http://192.168.0.155:155/api/Main/GetUserInfo', {
                UserAccountOrPhone: _this.username
            }, (res) => {
                _this.userInfo.UserName = res.UserName;
                _this.userInfo.IDCard = res.IDCard;
                _this.userInfo.UserAccount = res.UserAccount;
                _this.userInfo.C_Balance = res.C_Balance;
                _this.userInfo.CashBalance = res.CashBalance;
                _this.userInfo.UserId = res.UserId;
            })


            // 获取普惠积分当前价格
            $.post('http://192.168.0.155:155/api/Main/GetPH_InterfaceInfo', {}, (res) => {
                _this.pHIcode.last = res.result[0].last;
                _this.pHIcode.vol = res.result[0].vol;
                _this.pHIcode.changeday = res.result[0].changeday;

                //计算涨幅颜色
                _this.calchangeday();
            })


            // 普惠积分兑换记录
            let params = {
                PageSize: 4,
                PageIndex: 1,
                UserId: this.userInfo.UserId
            }
            $.get('http://192.168.0.155:155/api/Main/GetRecentExchangePH_Record', params, (res) => {
                let arr = {};
                for (let i = 0; i < res.length; i++) {
                    console.log(res[i]);
                    arr.id = res[i].Id;
                    arr.money = res[i].Use_CashBalance;
                    arr.num = res[i].Use_ThirdParty_Integral;
                    arr.code = res[i].ExchangePHIntegral_Qty;
                    arr.date = res[i].CreateDate;
                    _this.tableData.push(arr);
                    arr = {}
                }
            })
        })
    }
}
</script>
